<template>
    <transition name="slideright">
    <div class="food-wrap" v-show="showFlag" ref="foodWrap">
        <div class="food-container">
        <div class="header-image">
            <img :src="detailFood.image" alt=""/>
            <i class="icon-arrow_lift" @click="hide"></i>
        </div>
        <div class="food-header">
            <h2 class="food-name">{{detailFood.name}}</h2>
            <p class="count-detail"><span class="count-num">月售{{detailFood.sellCount}}份</span><span class="count-present">好评率{{detailFood.rating}}%</span></p>
            <p class="price"><span class="new">￥{{detailFood.price}}</span><span class="old" v-if="detailFood.oldPrice !=''">￥{{detailFood.oldPrice}}</span></p>
            <transition name="fade">
            <div class="buy-btn" v-show="!detailFood.count||detailFood.count==0" @click="addFirst($event)">加入购物车</div>
            </transition>
            <div class="car-controller-area"><v-carcontrol :food="detailFood" @add="addFood"></v-carcontrol></div>
        </div>
            <v-split v-if="detailFood.info"></v-split>
            <div class="food-info" v-if="detailFood.info">
                <h2 class="info-title">商品介绍</h2>
                <p class="info-content">{{detailFood.info}}</p>
            </div>
            <v-split></v-split>
            <div class="food-info">
                <h2 class="rating-title">商品评价</h2>
            </div>
            <v-foodRatings :selectType="selectType" @changeType="changeSelectType" :ratings="detailFood.ratings" :selectMsg="selectMsg" :readContent="readContent" @changeReadContent="changeContent"></v-foodRatings>
            <ul class="rating-list">
                <li class="rating-list-item border-1px-bottom" v-for="rating in filterArray">
                    <p class="ratinhg-time">{{rating.rateTime | formatDate}}</p>
                    <p class="rating-content"><i :class="{'icon-thumb_up':rating.rateType==0,'icon-thumb_down':rating.rateType==1}"></i><span>{{rating.text}}</span></p>
                    <div class="user-area">
                        <span class="username">{{rating.username}}</span>
                        <img :src="rating.avatar" class="avatar"/>
                    </div>
                </li>
            </ul>
            <p class="no-rating" v-show="!detailFood.ratings || detailFood.ratings.length === 0">暂无评价</p>
        </div>
    </div>
    </transition>
</template>
<script type="es6">
    import carcontrol from '../carcontrol/carcontrol'
    import split from '../split/split'
    import foodRatings from '../food_ratings/food_ratings'
    import {formateDate} from '../../../public/js/date.js'
    import Vue from 'vue'
    import BScroll from 'better-scroll'
    export default{
        data () {
            return {
                showFlag:false,
                selectType:0,
                selectMsg:{
                    all:"全部",
                    positive:"推荐",
                    nagative:"吐槽"
                },
                readContent:true
            }
        },
        props:{
            detailFood:{
                type:Object
            }
        },
        methods:{
            show () {
                this.showFlag = true
                this.selectType = 0
                this.readContent=true
                this.$nextTick(()=>{
                    if(!this.Foodscroll){
                        this.Foodscroll = new BScroll(this.$refs.foodWrap,{
                            click:true
                        })
                    }else{
                        this.Foodscroll.refresh()
                    }
                })
            },
            hide () {
                this.showFlag = false
            },
            addFirst (event) {
                if (event._constructed) {
                    if (!this.detailFood.count) {
                        Vue.set(this.detailFood, "count", 1)
                    } else {
                        this.detailFood.count++
                    }
                    this.$emit('add',event.target)
                }
            },
            addFood (target) {
                this.$emit('add',target)
            },
            changeSelectType (type) {
                this.selectType = type
                this.$nextTick(()=>{
                    this.Foodscroll.refresh()
                })
            },
            changeContent (content) {
                this.readContent = content
                this.$nextTick(()=>{
                    this.Foodscroll.refresh()
                })
            }
        },
        filters:{
            formatDate (time) {
                let date = new Date(time)
                return formateDate(date,"yyyy-MM-dd hh:mm")
            }
        },
        computed:{
            filterArray () {
                let contentArr = []
                if(this.detailFood.ratings){
                    this.detailFood.ratings.forEach((rating)=>{
                        switch (this.selectType) {
                            case 0 :
                                if(this.readContent&&rating.text&&rating.text!=""){
                                    contentArr.push(rating)
                                }else if(!this.readContent){
                                    contentArr.push(rating)
                                }
                                break
                            case 1 :
                                if(this.readContent&&rating.text&&rating.text!=""&&rating.rateType==0){
                                    contentArr.push(rating)
                                }else if(!this.readContent&&rating.rateType==0){
                                    contentArr.push(rating)
                                }
                                break
                            case 2 :
                                if(this.readContent&&rating.text&&rating.text!=""&&rating.rateType==1){
                                    contentArr.push(rating)
                                }else if(!this.readContent&&rating.rateType==1){
                                    contentArr.push(rating)
                                }
                        }
                    })
                }
                return contentArr
            }
        },
        components:{
            "v-carcontrol":carcontrol,
            "v-split":split,
            "v-foodRatings":foodRatings
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../../../public/stylesheet/mixin.less";
    .food-wrap{
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background:#fff;
        z-index:101;
        &.slideright-enter,&.slideright-leave-active{
            transform:translate3d(100%,0,0)
        }
        &.slideright-enter-active,&.slideright-leave-active{
            transition:all 0.2s linear
        }
        .food-container{
            padding-bottom:46px;
            .header-image{
                position:relative;
                width:100%;
                padding-top:100%;
                overflow:hidden;
                img{
                    position:absolute;
                    left:0;
                    top:0;
                    width:100%;
                    height:100%;

                }
                .icon-arrow_lift{
                    position:absolute;
                    padding:10px;
                    left:5px;
                    top:10px;
                    font-size:20px;
                    color:#fff;
                }

            }
            .food-header{
                position:relative;
                padding:18px;
                background:#fff;
                .food-name{
                    font-size:14px;
                    font-weight:700;
                    color:rgb(7,17,27);
                }
                .count-detail{
                    font-size:12px;
                    color:rgb(147,153,159);
                    margin-top:8px;
                    margin-bottom:12px;
                    .count-num{
                        margin-right:12px;
                    }
                }
                .price{
                    .new{
                        font-size:16px;
                        line-height:18px;
                        margin-right:6px;
                        color:#f00;
                        font-weight:700;
                        vertical-align:top;
                    }
                    .old{
                        vertical-align:top;
                        font-size:12px;
                        color:rgb(147,153,159);
                        text-decoration:line-through;
                    }
                }
                .buy-btn{
                    position:absolute;
                    right:18px;
                    bottom:18px;
                    height:24px;
                    padding:0 12px;
                    line-height:24px;
                    border-radius:12px;
                    background:rgb(0,160,220);
                    font-size:12px;
                    color:#fff;
                    z-index:101;
                    &.fade-enter,&.fade-leave-active{
                        opacity:0;
                    }
                    &.fade-leave-active,&.fade-enter-active{
                        transition:0.3s all linear;
                    }
                }
                .car-controller-area{
                    position:absolute;
                    right:24px;
                    bottom:12px;
                    z-index:99;
                }
            }
            .food-info{
                padding:18px;
                background:#fff;
                .info-title{
                    font-size:14px;
                    color:#000;
                    margin-bottom:6px;
                }
                .rating-title{
                    font-size:14px;
                    color:#000;
                }
                .info-content{
                    font-size:12px;
                    font-weight:200;
                    color:rgb(77,85,93);
                    line-height:2em;
                }
            }
            .rating-list{
                .rating-list-item{
                    position:relative;
                    padding:16px 0;
                    margin:0 16px;
                    .border-1px-bottom(rgba(7,17,27,0.1));
                    .ratinhg-time{
                        font-size:10px;
                        line-height:12px;
                        color:rgb(147,153,159);
                    }
                    .rating-content{
                        i{
                            vertical-align:middle;
                            margin-right:4px;
                            font-size:12px;
                            line-height:24px;
                        }
                        span{
                            vertical-align:middle;
                            font-size:12px;
                            line-height:16px;
                            color:rgb(7,17,27);
                        }
                        .icon-thumb_up{
                            color:rgb(0,160,220);
                        }
                        .icon-thumb_down{
                            color:rgb(147,153,159);
                        }
                    }
                    .user-area{
                        position:absolute;
                        display:flex;
                        align-items:center;
                        top:16px;
                        right:0;
                        .username{
                            margin-right:6px;
                            margin-top:4px;
                            font-size:10px;
                            color:rgb(147,153,159);;
                        }
                        .avatar{
                            width:12px;
                            height:12px;
                            border-radius:50%;
                        }

                    }
                }
            }
            .no-rating{
                margin-left:46px;
                padding-top:16px;
                font-size:12px;
                color:rgb(147,153,159);
            }
        }

    }
</style>